
<template>
  <el-table :data="skuObj.records" style="margin: 10px 0px">
    <el-table-column label="序号" width="80" type="index" align="center">
    </el-table-column>
    <el-table-column label="名称" prop="skuName"> </el-table-column>
    <el-table-column label="描述" prop="skuDesc"> </el-table-column>
    <el-table-column label="默认图片">
      <template #="{ row, $index }">
        <img
          v-if="row.skuDefaultImg"
          :src="row.skuDefaultImg"
          alt=""
          style="width: 100px; height: 100px"
        />
        <img
          v-else
          src="./1.png"
          alt=""
          style="width: 100px; height: 100px; border-radius: 50%"
        />
      </template>
    </el-table-column>
    <el-table-column label="重量（kg）" prop="weight"> </el-table-column>
    <el-table-column label="价格(元)" prop="price"> </el-table-column>
    <el-table-column label="操作" width="250px">
      <template #="{ row, $index }">
        <el-button
          :icon="row.isSale == 0 ? Top : Bottom"
          :type="row.isSale == 0 ? 'success' : 'info'"
          size="default"
          @click="changeSale(row)"
        ></el-button>

        <el-button
          type="primary"
          size="default"
          :icon="Edit"
          @click="ElMessage({ type: 'warning', message: '开发中...' })"
        ></el-button>
        <el-button
          type="info"
          size="small"
          :icon="InfoFilled"
          @click="showSkuInfo(row)"
        ></el-button>
        <el-button
          type="danger"
          size="small"
          :icon="Delete"
          @click="removeSku(row)"
        ></el-button>
      </template>
    </el-table-column>

    
  </el-table>

  <!-- 抽屉 -->
  <el-drawer v-model="drawer">
      <el-row :gutter="10">
        <el-col :span="6" style="text-align: right">名称:</el-col>
        <el-col :span="18">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" style="text-align: right">描述:</el-col>
        <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" style="text-align: right; line-height: 42px"
          >价格：</el-col
        >
        <el-col :span="18">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" style="text-align: right; line-height: 42px"
          >平台属性:</el-col
        >
        <el-col :span="18" style="line-height: 30px">
          <el-tag
            type="success"
            v-for="item in skuInfo.skuAttrValueList"
            :key="item"
            style="margin-left: 3px"
            >{{ item.valueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" style="text-align: right; line-height: 42px"
          >销售属性:</el-col
        >
        <el-col :span="18" style="line-height: 30px">
          <el-tag
            type="success"
            v-for="item in skuInfo.skuSaleAttrValueList"
            :key="item"
            style="margin-left: 3px"
            >{{ item.saleAttrValueName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col>商品图片:</el-col>
        <el-row>
          <el-col>
            轮播图 
            <el-carousel indicator-position="outside" style="height: 400px">
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item"
              >
                <img
                  :src="item.imgUrl"
                  alt=""
                  style="width: 100%; height: 300px"
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-row>
    </el-drawer>
     <!-- 分液器 -->、
     <el-pagination
      @current-change="getSkuList"
      @size-change="sizeHandler"
      :page-sizes="[2, 4, 5]"
      layout=" prev, pager, next, jumper,->, sizes,total,"
      :total="skuObj.total"
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      background
      :pager-count="7"
    />
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
  InfoFilled,
  Top,
  Bottom,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { reqSkuList, reqSkuInfo, reqDeleteSku } from "@/api/product/sku/sku";
import { ElMessage } from "element-plus";
//当前页
const currentPage = ref<number>(1);
//一页几条数据
const pageSize = ref<number>(10);
//收集SKU服务器返回的数据
let skuObj = reactive({});
//控制抽屉的现实和隐藏
let drawer = ref<boolean>(false);
//存储SKU详情的数据
let skuInfo = ref<any>({});
onMounted(() => {
  getSkuList();
});
//获取SKU接口数据//改变页码时处罚的回调
const getSkuList = async (pager: number = 1) => {
  currentPage.value = pager;
  let result = await reqSkuList(currentPage.value, pageSize.value);
  //储存服务器返回的数据
  Object.assign(skuObj, result);
};
//上架与下架按钮的回调
const changeSale = (row) => {
  //切换上架与下架按钮形态
  row.isSale == 0 ? (row.isSale = 1) : (row.isSale = 0);
  //上架与下架请求:携带SKUid,更新完上架与下架之后从新获取SKU最新列表数据
};
//改变当前页码的回调
let sizeHandler = () => {
  getSkuList();
};
//抽屉查看详情按钮的回调
const showSkuInfo = async (row) => {
  drawer.value = true;
  //获取SKU详情
  let result = await reqSkuInfo(row.id);
  //存储服务器数据
  skuInfo.value = result;
};
//删除SKU
const removeSku = async (row) => {
  try {
    //删除SKU
    await reqDeleteSku(row.id);
    //获取更新SKU
    getSkuList();
  } catch (error) {}
};
</script>

<style scoped>
/**深度选择器:能干什么  深度选择器有哪些  什么情况下使用**/
/**  >>>  /deep/ ::v-deep   回来咱们会花1一个小时讲解它***/
>>> .el-carousel__button {
  width: 10px;
  height: 10px;
  background: yellowgreen;
  border-radius: 50%;
}
</style>